<html>
  <head>
    <title>Gmail Favicon Notifier Options</title>
	
	<script type="text/javascript">
      // Saves options to localStorage.
      function save_options() {
        localStorage.desktopNotification = document.getElementById("desktopNotification").checked;
		if (parseInt(document.getElementById("hideTime").value)) {
		  localStorage.hideTime = document.getElementById("hideTime").value;
		} else {
		  localStorage.hideTime = "10";
		  document.getElementById("hideTime").value = "10";
		}
		
		select = document.getElementById("chatNotification");
        var chatNotification = select.children[select.selectedIndex].value;
        localStorage.chatNotification = chatNotification == 'true' ? true : false;
		
		// 0 -> Only Priority Inbox
		// 1 -> Whole Inbox
		select = document.getElementById("checkArea");
        var checkArea = select.children[select.selectedIndex].value;
		localStorage.checkArea = checkArea;

		var newMailSoundNotification = document.getElementById("newMailSoundNotification").checked;
		if(newMailSoundNotification) {
		  localStorage.newMailSoundNotification = true;
		  select = document.getElementById("newMailSound");
          var newMailSound = select.children[select.selectedIndex].value;
		  localStorage.newMailSound = newMailSound;
		} else {
		  localStorage.newMailSoundNotification = false;
		  localStorage.newMailSound = '';
		}
		
        // Update status to let user know options were saved.
        document.getElementById("status").style.display = "";
        setTimeout(function() {
          document.getElementById("status").style.display = "none";
        }, 1000);
      }

      // Restores select box state to saved value from localStorage.
      function restore_options() {
        var desktopNotificationValue = window.webkitNotifications.checkPermission() == 0 && (localStorage.desktopNotification == "true" || !localStorage.desktopNotification);
        document.getElementById("desktopNotification").checked = desktopNotificationValue;
		document.getElementById("hideTime").disabled = !desktopNotificationValue;
		document.getElementById("hideTime").value = localStorage.hideTime ? localStorage.hideTime : "10";
		
		var chatNotificationValue = localStorage.chatNotification == "true" || !localStorage.chatNotification;
        select = document.getElementById("chatNotification");
        for (var i = 0; i < select.children.length; i++) {
          var child = select.children[i];
          if (child.value == "true" && chatNotificationValue) {
            child.selected = "true";
            break;
          }
		  if (child.value == "false" && !chatNotificationValue) {
		    child.selected = "true";
			break;
		  }
        }
		
		var checkAreaValue = localStorage.checkArea ? localStorage.checkArea : "0";
        select = document.getElementById("checkArea");
        for (var i = 0; i < select.children.length; i++) {
          var child = select.children[i];
          if ( (child.value == "0" && checkAreaValue == "0") || !checkAreaValue) {
            child.selected = "true";
            break;
          }
		  if (child.value == "1" && checkAreaValue == "1") {
            child.selected = "true";
            break;
          }
        }
		
		var newMailSoundNotificationValue = localStorage.newMailSoundNotification == "true" || !localStorage.newMailSoundNotification;
		if (newMailSoundNotificationValue) {
		  document.getElementById("newMailSoundNotification").checked = true;
		  select = document.getElementById("newMailSound");
          for (var i = 0; i < select.children.length; i++) {
            var child = select.children[i];
            if (child.value == localStorage.newMailSound) {
              child.selected = "true";
              break;
            }
          }
		  enableNewMailSoundNotification();
		} else {
		  document.getElementById("newMailSoundNotification").checked = false;
		  disableNewMailNotificationSound();
		}
      }
	  
	  function changeNewMailSoundNotificationStatus(elem) {
	    if(elem.checked) {
		  enableNewMailSoundNotification();
		} else {
		  disableNewMailSoundNotification();
		}
	  }
	  
	  function enableNewMailSoundNotification(elem) {
		document.getElementById('newMailSound').disabled = false;
		document.getElementById('newMailSoundPreview').style.display = "";
		document.getElementById('newMailSoundPreview').src =
		    document.getElementById('newMailSound').children[document.getElementById('newMailSound').selectedIndex].value;
	  }
	  
	  function disableNewMailSoundNotification() {
		document.getElementById('newMailSound').disabled = true;
		document.getElementById('newMailSoundPreview').style.display = "none";
	  }
	  
	  function changeNewMailSound() {
	    select = document.getElementById("newMailSound");
        document.getElementById('newMailSoundPreview').src = select.children[select.selectedIndex].value;
	  }
	  
    </script>
	<style>
	  h1 {
	    padding: 0px;
		margin: 0px;
	    border-bottom: solid 1px #AAAAAA;
		text-shadow: 1px 1px 2px #BBBBBB;
	  }
	  h2 {
	    font-size: 18px;
	    padding: 0px;
	    margin: 0px;
	  }
	  p {
	    padding: 0px;
		margin: 5px 0px 5px 0px;
		line-height: 1.7em;
	  }
	  
	  div.main {
	    width: 600px;
		margin: 100px auto;
		padding: 10px 20px;
		border: solid 1px #AAAAAA;
		border-radius: 20px;
		-webkit-box-shadow: 2px 2px 5px #BBBBBB;
	  }
	  div.option {
	    margin: 30px 0px;
		padding: 0px;
	  }
	  button {
	    width: 5em;
		height: 2.5em;
	  }
	  #status {
	    padding: 5px;
	    margin-left: 10px;
		background-color: yellow;
	  }
	</style>
  </head>

  <body onload="restore_options()">
    <div class="main">
 	  <h1>
	    <img title="Gmail Favicon Notifier" alt="Gmail Favicon Notifier" src="icon48.png" style="vertical-align: -12px; margin-right: 10px;" />
		Gmail Favicon Notifier
	  </h1>
	  <div class="option">
	    <h2>DesktopNotification</h2>
	    <p>
          <input id="desktopNotification" type="checkbox" onChange="document.getElementById('hideTime').disabled = !this.checked;" /> Enable desktop notification:
		  <br />
		  Hide notification after <input id="hideTime" type="text" style="width:2em; text-align:center;" /> seconds.
		</p>
	  </div>
	  <div class="option">
	    <h2>Mail options:</h2>
	    <p>
	      Check for new mail in:
		  <select id="checkArea">
		    <option value="0">Priority Inbox</option>
 		    <option value="1">Inbox</option>
		  </select>
	    </p>
	    <p>
	      <input id="newMailSoundNotification" type="checkbox" onchange="changeNewMailSoundNotificationStatus(this)"/> Enable sound notification for new mail:
	      <br />
	        <select id="newMailSound" disabled="false" onchange="changeNewMailSound()">
            <option value="whoosh-19.mp3">Woosh</option>
            <option value="weird-wind1.mp3">Weird wind</option>
		    <option value="bubble-drop.mp3">Bubble drop</option>
		    <option value="bell-small.mp3">Bell small</option>
		    <option value="whoosh-15.mp3">Woosh 2</option>
		    <option value="bell-transition.mp3">Bell transition</option>
          </select>
		  <audio id="newMailSoundPreview" src="" controls="controls" style="vertical-align: -10px;"></audio>
        </p>
	  </div>
	  <div class="option">
		<h2>Chat options:</h2>
		<p>
		  Chat notification:
          <select id="chatNotification">
            <option value="true">Enable</option>
            <option value="false">Disable</option>
          </select>
        </p>
	  </div>
	  <p>
        <button onclick="save_options()">Save</button><span id="status" style="display: none;">Options Saved.</span>
	  </p>
	</div>
  </body>
</html>